import React, { useEffect, useState } from "react";
import {
  Button,
  Checkbox,
  Form,
  message,
  Input,
  Upload,
  Select,
  DatePicker,
  Radio,
  InputNumber,
} from "antd";
import type {
  FormProps,
  DatePickerProps,
  RadioChangeEvent,
  GetProp,
  UploadProps,
  UploadFile,
} from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { CompanyInfo, UpdateUserInfo } from "@/api/user";
import { useSelector } from "react-redux";
import { users } from "@/store/slice/info";
import locale from "antd/locale/zh_CN";
import { getToken } from "@/util";

import style from "./index.module.scss";
type FileType = Parameters<GetProp<UploadProps, "beforeUpload">>[0];
type FieldType = {
  userAccount?: string;
  userPhone?: string;
  realName?: string;
  companyId?: string;
  id?: string;
  age?: number;
  superAdmin?: string;
  birthday?: string;
};
interface companyType {
  id: string;
  name: string;
}

const normFile = (e: any) => {
  if (Array.isArray(e)) {
    return e;
  }
  return e?.fileList;
};

const Person: React.FC = () => {
  const initialValues = Object.assign({}, useSelector(users).info.userInfo);
  useEffect(() => {
    getCompanyInfo();
  }, []);
  // 获取公司
  const [companyValue, setCompanyValueValue] = useState([]);
  const getCompanyInfo = async () => {
    const res = await CompanyInfo();
    setCompanyValueValue(res.data);
  };
  const onChangeRadio = (e: RadioChangeEvent) => {};
  // =====图片
  const handleChange: UploadProps["onChange"] = ({ fileList }) => {
    // 每一种上传状态都会触发
    console.log("Aliyun OSS:", fileList);
    let imgPath = fileList[0]?.response?.data.imgPath;
    console.log(imgPath);
    // onChange?.([...fileList]);
  };
  const uploadProps = {
    // action: "/api/business/syspic/picupload",
    action: "#",
    maxCount: 1,
    name: "fileName",
    fileList: [],
    headers: {
      token: getToken() || "",
    },
    // onChange: handleChange,
  };
  // ====end
  const onFinish: FormProps<FieldType>["onFinish"] = (fieldsValue: any) => {
    console.log(uploadProps.fileList);

    return;
    const values = {
      ...fieldsValue,
      birthday: fieldsValue["birthday"].format("YYYY-MM-DD"),
    };
    UpdateUserInfo(values).then((res) => {
      message.success(res.data);
    });
  };
  return (
    <>
      <h1>个人信息修改</h1>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        onFinish={onFinish}
        autoComplete="off"
        initialValues={initialValues}
      >
        <Form.Item
          label="Upload"
          valuePropName="fileList"
          getValueFromEvent={normFile}
        >
          <Upload {...uploadProps} listType="picture-card">
            <button style={{ border: 0, background: "none" }} type="button">
              <PlusOutlined />
              <div style={{ marginTop: 8 }}>Upload</div>
            </button>
          </Upload>
        </Form.Item>
        <Form.Item<FieldType> label="账号" name="userAccount">
          <Input disabled />
        </Form.Item>
        <Form.Item<FieldType> label="手机号" name="userPhone">
          <Input />
        </Form.Item>
        <Form.Item<FieldType>
          label="真实姓名"
          name="realName"
          rules={[{ required: true, message: "Please input your username!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          label="年龄"
          name="age"
          rules={[{ required: true, message: "Please input your age!" }]}
        >
          <InputNumber style={{ width: "100%" }} />
        </Form.Item>

        <Form.Item<FieldType>
          label="公司"
          name="companyId"
          rules={[{ required: true, message: "Please select!" }]}
        >
          <Select>
            {companyValue.map((item: companyType) => {
              return (
                <Select.Option key={item.id} value={item.id}>
                  {item.name}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>

        <Form.Item<FieldType> label="生日" name="birthday">
          <DatePicker
            style={{ width: "100%" }}
            format={{
              format: "YYYY-MM-DD",
            }}
          />
        </Form.Item>
        <Form.Item<FieldType>
          label="是否管理员"
          name="superAdmin"
          rules={[{ required: true, message: "Please input your password!" }]}
        >
          <Radio.Group onChange={onChangeRadio}>
            <Radio value={1}>启用</Radio>
            <Radio value={0}>禁用</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};
export default Person;
